<template>
  <van-area
    :title="areaTitle"
    :area-list="areaList"
    value="110101"
    @cancel="handleIsCity"
    @confirm="onConfirm"
  />
  <!-- @click="$emit('component','sendArea')" -->
</template>

<script>
import { areaList } from "@/utils/areaList";
import { useStore } from "vuex";

export default {
  name: "Area",
  props: {
    areaTitle: {
      type: String,
      default: "地区选择",
    },
  },
  setup() {
    const store = useStore();
    // console.log(areaList);
    //关闭弹出框
    const handleIsCity = () => {
      store.commit("area/handleIsArea");
    };
    //选择地区
    const onConfirm = (value) => {
      // console.log(value);
      // const address = `${value[0].name} ${value[1].name} ${value[2].name}`;
      // store.commit("area/handleCity", address);
      store.commit("area/handleCity", value[2].name);
      store.commit("area/handleIsArea");
      console.log(store.state.area.city);
    };

    return { areaList, handleIsCity, onConfirm };
  },
};
</script>

<style scoped></style>
